<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo1"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<body>
<style>
    .count-card{
        height: 110px;
        border-radius: 6px;
    }
    .first-card{
        background-color: rgba(110,143,242,1);
    }
    .second-card{
        background-color: rgba(197,101,252,1);
    }
    .third-card{
        background-color: rgba(252,168,116,1);
    }
    .count-card{
        height: 100px;
        border-radius: 6px;
        display: flex;
        width: 30%;
        flex-wrap: wrap;
        align-content: center;
        padding-left: 20px;
        cursor: pointer;
    }
    .count-card-c{
        display: flex;
    }
    .count-card-c-font{
        margin-left: 20px;
        color: #fff;
        font-size: 16px;
        line-height: 1.8;
    }
    .phb-tab{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        font-size: 16px;
        font-weight: 700;
    }
    .phb-member{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .phb-member img{
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }
    .card-header-o{
        font-size: 18px;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .card-header-o span{
        font-size: 14px;
        color: #797979
    }
    .layui-row {
        display: flex;
        align-items: stretch; /* 默认值可不写 */
    }

    .layui-col-xs4 > .layui-card {
        height: 98%; /* 关键：让卡片撑满列高 */
        display: flex;
        flex-direction: column;
    }

    .layui-card-body {
        flex: 1; /* 让内容区域自动填充剩余高度 */
    }
</style>
<div class="layui-card">
    <div class="layui-card-body padding-15">
        <div class="layui-row layui-col-space20">
            <div class="layui-col-xs8">
                <div class="layui-card">
                    <div class="layui-card-header">👏 欢迎回来，[[${userNickname}]]</div>
                    <div class="layui-card-body" >
                        <div style="display: flex;justify-content: space-between;margin-bottom: 20px">
                           <div class="first-card count-card" data-open="/pcs/order/index?spm=m-147-213&orderStatus=0">
                               <div class="count-card-c">
                                   <div>
                                       <img th:src="@{/images/dqr.png}" width="48px" height="48px">
                                   </div>
                                   <div class="count-card-c-font">
                                       <div>待确认订单</div>
                                       <div>[[${dqr_order_count}]]个</div>
                                   </div>
                               </div>
                           </div>
                            <div class="second-card count-card" data-open="/pcs/order/index?orderStatus=2">
                                <div class="count-card-c">
                                    <img th:src="@{/images/fwzdd.png}" width="48px" height="48px">
                                </div>
                                <div class="count-card-c-font">
                                    <div>服务中订单</div>
                                    <div>[[${fwz_order_count}]]个</div>
                                </div>
                            </div>
                            <div class="third-card count-card" data-open="/pcs/complain/index">
                                <div class="count-card-c">
                                    <img th:src="@{/images/khts.png}" width="48px" height="48px">
                                </div>
                                <div class="count-card-c-font">
                                    <div>客户投诉</div>
                                    <div>[[${complain_order_count}]]个</div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="card-header-o"> 服务单量统计<span>(本年)</span></div>
                        <div id="serve-fy" style="height: 250px;"></div>
                    </div>
                </div>

                <div style="width: 100%;display: flex;justify-content: space-between;">
                    <div class="layui-card" style="width: calc(50% - 5px);height: 320px">
                        <div class="card-header-o" style="padding-left: 15px">好评度统计<span>(本年)</span></div>
                        <div id="hpd" style="height: 250px;"></div>
                    </div>
                    <div class="layui-card" style="width: calc(50% - 5px);height: 320px">
                        <div class="card-header-o" style="padding-left: 15px">服务类型统计<span>(本年)</span></div>
                        <div id="fwlx" style="height: 250px;"></div>
                    </div>
                </div>

            </div>
            <div class="layui-col-xs4">
                <div class="layui-card" >
                    <div class="layui-card-header">服务排行榜(本年)</div>
                    <div class="layui-card-body">
                       <div class="phb-tab" th:each="item:${fw_ranking}">
                           <div class="phb-member">
                               <img th:if="${item.no==1}" th:src="@{/images/first.png}" style="width: 18px;height: 18px;">
                               <img th:if="${item.no==2}" th:src="@{/images/second.png}" style="width: 18px;height: 18px;">
                               <img th:if="${item.no==3}" th:src="@{/images/third.png}" style="width: 18px;height: 18px;">
                               <div th:if="${item.no>3}"   style="color: #a7acb1;font-size: 20px;">[[${item.no}]]</div>
                               <img th:src="${item.headimg}">
                               <div>[[${item.porterName}]]</div>
                           </div>
                           <div>
                               完成服务<span style="color: #36c336;font-weight: 700;">[[${item.completedOrderCount}]]次</span>
                           </div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    require(['echarts'],function (echarts) {
        const serveFy = echarts.init(document.getElementById('serve-fy'));

        $.ajax({
            url: '/pcs/index/getServiceCost',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                console.log(res)
                const serveFyOption = {
                    animation: false,
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: res.months,
                    },
                    yAxis: {
                        type: 'value',
                        name: '单'
                    },
                    series: [{
                        data: res.num,
                        type: 'line',
                        color: '#5eaf5e',
                        smooth: true,
                        areaStyle: {
                            opacity: 0.6,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#5eaf5e'
                                },
                                {
                                    offset: 1,
                                    color: '#cad6ca'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: "{c}单",
                        },
                    }]
                };
                serveFy.setOption(serveFyOption);
            }
        })




        const hpd = echarts.init(document.getElementById('hpd'));

        $.ajax({
            url: '/pcs/index/getScore',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                console.log("getScore",res)
                let hpdoption = {

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '10%',
                        top: '3%',
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: res.category
                    },
                    color:["#00c586"],
                    series: [
                        {
                            type: 'bar',
                            data: res.value,
                            label: {
                                show: true,
                                position: 'right',
                                formatter: "{c}单",
                                color:"#00c586"
                            },
                        }
                    ]
                };
                hpd.setOption(hpdoption)
            }
        })



        const fwlx = echarts.init(document.getElementById('fwlx'));

        $.ajax({
            url: '/pcs/index/getOrderCount',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                console.log("getOrderCount",res)
                let fwlxoption = {

                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        bottom: '1%',
                        left: 'center'
                    },
                    color:["#2478f2","#5f9cf8","#84b7f9"],
                    series: [
                        {
                            type: 'pie',
                            radius: ['40%', '70%'],
                            data: res,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: "{b}\n{c}单",
                            }
                        }
                    ]
                };
                fwlx.setOption(fwlxoption)
                // fwlxoption.series[0].data = res.data
                // fwlx.setOption(fwlxoption)
            }
        })



    })
</script>

</body>
</html>